/*
	Main stylesheet for the filtered query printer
*/
.filtered {

	height: 100%;
	position: relative;

	.filtered-filters {

		height: 40%;
		overflow: hidden;
		border: 1px solid #aaaaaa;
		margin: 1em;
		position: relative;
		top: 0;
		left: 0;

		&:empty {
			display: none;
		}

		.filtered-filter {
			position: relative;

			.filtered-filter-label {

				height: 1em;
				position: absolute;
				top: -.7em;
				background: #ffffff;
				padding: 0 1em;
				font-weight: bold;

			}

			.filtered-filter-onoff {
				position: absolute;
				top: -9px;
				left: -9px;
				width: 0;
				height: 0;

				&::before {
					background: #ffffff;
					width: 18px;
					height: 18px;
					display: inline-block;
					text-align: center;
					cursor: pointer;
				}

			}

			&.enabled {
				.filtered-filter-onoff::before {
					content: url();
				}
			}

			&.disabled {
				.filtered-filter-onoff::before {
					content: url();
				}

				.filtered-filter-collapse {
					display: none;
				}
			}

			.filtered-filter-collapse:before {
				margin: 0;
				background-color: #ffffff;
				width: 1.5em;
				float: right;
				position: absolute;
				top: -0.8em;
				right: 1em;
				text-align: center;
				cursor: pointer;
			}

			.filtered-filter-collapse.collapsed:before {
				content: '[+]';
			}

			.filtered-filter-collapse.uncollapsed:before {
				content: '[-]';
			}
		}

		.filtered-filter-spinner {
			position: absolute;
			top: 0;
			left: 0;
			background: #ffffff;
			height: 100%;
			width: 100%;
			z-index: 1001;
			opacity: .7;
		}

	}

	.filtered-views {

		height: 60%;
		overflow: auto;
		border: 1px solid #aaaaaa;
		margin: 1em;

		.filtered-views-selectors-container {

			border-bottom: 1px solid #aaaaaa;
			overflow: hidden;

			&:empty {
				display: none;
			}

			.filtered-view-selector {

				border-right: 1px solid #aaaaaa;
				padding: 1em;
				float: left;
				cursor: pointer;

				&.selected {
					background-color: #f3f3f3;
				}

				&.active {
					background-color: #f0f7ff;
				}
			}
		}

		.filtered-views-container {

			padding: 1em;

			&:empty {
				display: none;
			}

			.filtered-view {
				&.active {
					display: block;
				}

				&.inactive {
					display: none;
				}
			}
		}
	}

	.filtered-spinner {
		height: 100px;
		width: auto;
		position: relative;
		top: 0;
		left: 0;
		margin: 1em;
	}
}